<template>
  <view>
    <!-- 头部导航栏 -->
    <view class="top-navigate bg-white" style="padding: 53px 10px 5px 10px;">
      <view class="content cuIcon-back text-xl top-navigate-title" hover-class="none"
        @click="goBackUserInfo"></view>
      <view class="text-xl top-navigate-title">个人信息</view>
    </view>
    <!-- 个人信息 表单 -->
    <form class="userinfo-form">
      <view class="cu-form-group text-sm text-gray">
        <view :disabled="true" class="title text-sm text-gray">id:{{userinfo._id}}</view>
      </view>

      <view class="cu-form-group">
        <view class="title">姓名:</view>
        <input name="name" v-model="userInfoForm.user_name" ></input>
      </view>

      <view class="cu-form-group">
        <view class="title">性别:</view>
        <picker @change="PickerSexChange" :value="index" :range="pickerSex">
          <view class="picker" v-model="userInfoForm.user_sex" style="text-align: left;">
            {{index>=0?pickerSex[index]:userInfoForm.user_sex}}
          </view>
        </picker>
      </view>

      <view class="cu-form-group">
        <view class="title">手机号码:</view>
        <input name="phone" v-model="userInfoForm.user_phone"></input>
        <view class="cu-capsule radius">
          <view class='cu-tag bg-blue '>+86</view>
          <view class="cu-tag line-blue">中国大陆</view>
        </view>
      </view>

      <view class="cu-form-group ">
        <view class="title">QQ:</view>
        <input name="qq" v-model="userInfoForm.user_qq"></input>
      </view>

      <view class="cu-form-group ">
        <view class="title">邮箱:</view>
        <input name="email" v-model="userInfoForm.user_email_code"></input>
      </view>

      <view class="cu-form-group align-start">
        <view class="title">自我介绍:</view>
        <textarea maxlength="-1" :disabled="modalName!=null" @input="textareaInput" placeholder="多行文本输入框"
          v-model="userInfoForm.user_introduce"></textarea>
      </view>
      <button type="primary" class="btn-login bg-green" @click="editUserInfo">确定</button>
    </form>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    name: "my-userinfo-form",
    data() {
      return {
        userInfoForm: {},
        pickerSex: ['男', '女', '其他'],
        index: -1,
      };
    },
    computed: {
      ...mapState('m_user', ['userinfo']),
    },
    methods: {
      ...mapMutations('m_user', ['updateUserInfo']),
      // 修改个人信息数据
      async editUserInfo() {
        // 确认修改 再修改 选择的性别
        if(this.index>-1) this.userInfoForm.user_sex=this.pickerSex[this.index ]
        // 本地持久化 userInfo信息
        this.updateUserInfo(this.userInfoForm);
        // 保存去除id 的一个对象用于 更新数据
        const deletIdObj = {
          ...this.userInfoForm
        };
        console.log(deletIdObj);
        // 修改对应数据库数据 根据id修改
        if (delete deletIdObj._id) {
          const db = uniCloud.database();
          const result = await db.collection("my_user").where({
            _id: this.userinfo._id
          }).update(deletIdObj);
          console.log(result);
        } else {
          uni.$showMsg('数据异常！')
        }
        // 修改 formShow 跳转回个人中心
        this.$parent.formShow = false
      },
      //多行文本框输入
      textareaInput(e) {
        this.textareaAValue = e.detail.value
      },
      //性别选择
      PickerSexChange(e) {
          this.index = e.detail.value
          console.log(this.index);
      },
      goBackUserInfo(){
        // 修改 formShow 跳转回个人中心
        this.$parent.formShow = false
        // 初始化 index
        this.index=-1
      }
    },
    created() {
      this.userInfoForm = this.userinfo;
    }
  }
</script>

<style lang="scss">
  .top-navigate {
    display: flex;
    justify-content: left;
    align-items: center;


    .top-navigate-title {
      margin: 0 5px;
      font-weight: bold;
    }

    .top-navigate-address {
      margin: 0 5px;
    }
  }

  .btn-login {
    width: 90%;
    border-radius: 100px;
    margin: 15px auto;
  }
</style>